<template>
  <div id="grid_container">
    <ul class="grid_list" v-if="productList.length">
      <router-link
        v-for="(item, index) in productList" :key="index"
        :to="{path: '/detail', query: {product_id: item.product_id}}"
        tag="li">
        <p><img :src="productBaseUrl + item.product_image" alt=""></p>
        <div class="product_cnt">
          <p class="name">{{item.product_name}}</p>
          <p class="price">￥ {{item.price}}</p>
        </div>
      </router-link>
    </ul>
    <ul v-else>
      <li class="list_back_li" v-for="item in 10" :key="item">
        <img src="../assets/shopback.svg" class="list_back_svg">
      </li>
    </ul>
    <p v-if="touchend" class="empty_data">没有更多了</p>
    <p v-if="!touchend" class="load_data">加载更多</p>
    <transition name="loading">
      <loading v-show="showLoading"></loading>
    </transition>
  </div>
</template>

<script>
  import Loading from '../components/Loading.vue'
  import { imgBaseUrl } from '../config/env'
  import { product } from '../service/getData'
  export default {
  	data() {
  		return {
        productList: [],
        productBaseUrl: 'https://s3.cn-north-1.amazonaws.com.cn/cdn.smartbuyglasses.cn/image/en/images/',
        touchend: true,
        showLoading: true
      }
    },
    components: {
      Loading
    },
    props: [ 'keyword', 'brandId', 'categoryId', 'genderId', 'sort'],
    mounted() {
  		this.initData()
    },
    methods: {
  		async initData() {
        await product(this.keyword, this.brandId, this.categoryId, this.genderId, this.sort).then(res => {
          this.productList = res.data
          if(this.productList.length) {
            this.showLoading = false
          }

        })
      }
    },
    watch: {
  		keyword: function () {
        this.initData()
      },
      brandId: function () {
        this.initData()
      },
      categoryId: function () {
        this.initData()
      },
      genderId: function () {
        this.initData()
      },
      sort: function () {
        this.initData()
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../style/mixin";
  #grid_container {
    padding-bottom: 2.0rem;
    background: #fff;
    .grid_list {
      li {
        @include fj;
        justify-content: flex-start;
        align-items: center;
        p {
          text-align: left;
        }
        .product_cnt {
          .name {
            font-size: 0.6rem;
          }
          .price {
            font-size: 0.85rem;
            font-weight: bold;
            color: #f19124;
          }
        }
      }
    }
    .empty_data{
      @include sc(0.6rem, #666);
      text-align: center;
      line-height: 2rem;
    }
    .load_data {
      @include sc(0.6rem, #666);
      text-align: center;
      line-height: 2rem;
      text-decoration: underline;
      cursor: pointer;
    }
  }
  .loading-enter-active, .loading-leave-active {
    transition: opacity 1s
  }
  .loading-enter, .loading-leave-active {
    opacity: 0
  }
</style>
